<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度展示</title>
    <!--引入echarts-->
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.4.1.min.js"></script>
</head>
<body><br>
<!--年：<select id="yselect" ></select>
月：<select id="mselect"><option >1</option><option>2</option><option>3</option><option>4</option>
    <option>5</option><option>6</option><option>7</option><option>8</option>
    <option>9</option><option>10</option><option>11</option><option>12</option></select>-->

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 900px;height:700px;"></div>
<!--引入jquery-->

<script type="text/javascript">
    //  alert(1111);
    let date = new Date();
    let currYear = date.getFullYear();
    let currMonth = date.getMonth()+1;
    //动态添加下拉年份
    for (let i = currYear-4; i <= currYear; i++) {
        $("#yselect").append("<option>"+i+"</option>");
    }
    //赋予默认值
    $("#yselect").val(currYear);
    $("#mselect").val(currMonth);
    //当年改变时触发
    $("#yselect").change(function(){
        showOperLogChart($(this).val(),$("#mselect").val());
    });
    //当月改变时触发
    $("#mselect").change(function(){
        showOperLogChart($("#yselect").val(),$(this).val());
    });

    //初始化方法，默认当前年月
    showOperLogChart(currYear,date.getMonth()+1);
    // 展示图标方法
    function showOperLogChart(year,month) {
        let xdata = [];
        let progress_typeData = [];
        let updateData = [];
        let delData = [];

        $.ajax({
            url: "/progress/queryShowChartData",
            type: "GET",
            async: false,//false为同步，必须响应代码执行完毕，才会执行该请求下面的代码，如果是true或者不写都是异步
            data: {year: year, month: month},
            dataType: "json",
            success: function (resp) {
                //alert(3333);
                if (resp.code == 0) {
                    let data = resp.data;

                    for (let i = 0; i < data.length; i++) {
                        xdata.push(data[i].day);
                        progress_typeData.push( progress_type );
                    }
                }
            },
            error: function (e) {
                layer.msg("请求失败");
            }
        });
        //alert(2222);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // Use axis to trigger tooltip
                    type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {
                data: ['提交申请', '商标申请受通', '公告', '商标被拒绝', '下证']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
            },
            series: [
                {
                    name: '提交申请',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [4, 1, 2, 0, 0 ]
                },
                {
                    name: '商标申请受通',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [1, 3, 1, 0, 2]
                },
                {
                    name: '公告',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [0, 1, 2, 2, 0]
                },
                {
                    name: '商标被拒绝',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [0, 0, 0, 1, 0]
                },
                {
                    name: '下证',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [0, 0, 1, 0, 2]
                }
            ]

        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    };

</script>
</body>
</html>